import React, { useState } from 'react'
import { Outlet } from 'react-router-dom'
import { Switch ,Popup} from 'antd-mobile'
import {  Space, Button } from 'antd-mobile'
import Tabber from './pages/tabber/Tabber'
import { ResultPage } from 'antd-mobile'
import './App.css'
import { CalendarPicker, List } from 'antd-mobile'
// import dayjs from 'dayjs'

// import { lorem } from 'demos'
function App() {

//  const data=()=>{

//  }
 const [visible1, setVisible1] = useState(false)
//  const mockContent = (
//   <div style={{ padding: 20 }}>{lorem.generateParagraphs(1)}</div>
// )
  return (
    <div>
       <ResultPage
      status=''
      title='火车票预订'
      description='便捷购票，服务您的每一次出行'
    >
      <div style={{width:'230px',height:'200px',backgroundColor:'white'}} className='box'>
         <p >北京---上海</p>
         <hr />
         <p  onClick={() => {
                setVisible1(true)
              }}>2024-12-10 <span>周二（今天）</span></p>
         
            <Popup
              visible={visible1}
              onMaskClick={() => {
                setVisible1(false)
              }}
              onClose={() => {
                setVisible1(false)
              }}
              bodyStyle={{ height: '40vh' }}
            >
              {/* {mockContent} */}
            </Popup>
            <List.Item
        onClick={() => {
          setVisible1(true)
        }}
      >
        
        <CalendarPicker
          visible={visible1}
          selectionMode='single'
          // defaultValue={singleDate}
          onClose={() => setVisible1(false)}
          onMaskClick={() => setVisible1(false)}
        />
      </List.Item>
     
            <hr />
         <p>只看高铁/动车 <Switch /></p>
         <hr />
         <button >
           搜索
          </button>
      </div>

    </ResultPage>
   
      <Outlet></Outlet>
      <Tabber></Tabber>
    </div>
  )
}

export default App
